<template>
  <div class="container">
    <div class="main">
      <UserDataDialog />
      <div class="search-container">
        <SearchDialog class="search-dialog" @callback="handleSearchData" />
      </div>
      <DialogGis @callback-data="handleGisData" @click-heat="handleHeat" @to-detail="(detailShow = true)" />
      <div class="heat" v-if="heatShow">
        <TimeLineDialog @close="heatShow = !heatShow" />
      </div>
      <img :src="icon" class="video-icon" @click="handleShow">
      <VideoDialog v-if="videoShow" @close="handleShow" />
      <LocationDialog />
      <DetailDialog v-if="detailShow" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import DialogGis from '../../components/Dialog/DialogGis.vue'
import VideoDialog from '../../components/Dialog/DialogVideo.vue'
import TimeLineDialog from '../../components/Dialog/DialogTimeline.vue'
import UserDataDialog from '../../components/Dialog/DialogUserData.vue'
import SearchDialog from '../../components/Dialog/DialogSearch.vue'
import LocationDialog from '../../components/Dialog/DialogLocation.vue'
import DetailDialog from '@/components/Dialog/DialogWarnInfo.vue'
import videoIcon from '../../assets/dialog/video_icon.png'

const heatShow = ref(false)
const icon = ref(videoIcon)

const videoShow = ref(false)

const detailShow = ref(false)

const handleShow = () => {
  videoShow.value = !videoShow.value
}

// 处理地图显示隐藏结果
const handleGisData = (ids: string, isVisible: boolean) => {
  console.log(ids)
  console.log(isVisible)
}
const handleHeat = (id: string, isShow: boolean) => {
  console.log(id)
  console.log(isShow)
  heatShow.value = !heatShow.value
}
// 处理搜索结果
const handleSearchData = (content: string) => {
  console.log(content)
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;

  .main {
    display: flex;
    flex-direction: column;

    .video-icon {
      width: 37px;
      height: 47px;
    }

    &:deep(.el-button) {
      width: 100px;
    }

    .search-container {
      .search-dialog {
        float: right;
        margin-right: 12px;
      }
    }

    .gis {
      display: flex;
    }

    .heat {
      position: absolute;
      bottom: 0;
      right: 0;
      margin-right: 50px;
      margin-bottom: 40px;
    }
  }

  .detail {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
}
</style>
